<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kHuT1n634XyhUTcOU3oPa2ovhKbOK5NN"></script>
    <title></title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var mapData=null;


    //地图初始化
    var bm = new BMap.Map("allmap");
    /*获取充电桩数据*/
    $(function () {
        $.get("/index/getPlotPile", function(result){
            mapData =result.data;
            if(mapData!=null){
                bm.centerAndZoom(new BMap.Point(mapData[0].lng,mapData[0].lat), 15);
                bm.enableScrollWheelZoom(true);
            }
            //开启鼠标滚轮缩放
        });
    })



    //坐标转换完之后的回调函数
    translateCallback = function (data){
        if(data.status === 0) {
            for (var i = 0; i < data.points.length; i++) {
                //bm.addOverlay(new BMap.Marker(data.points[i]));
                addMarker(mapData)
                //bm.setCenter(data.points[i]);
            }
        }
    }


    setTimeout(function(){
/*坐标超限制解决*/
        var total = 0; //总记录数
        var groupCount = 0; //每次转十条
        if (mapData.length % 10 > 0) {
            groupCount = (mapData.length / 10) + 1;
        }
        else {
            groupCount = (mapData.length / 10);
        }
        for(var i=0;i<groupCount;i++) { //外层循环，有多少组十条
            var pos = new Array();
            for (var j = 0; j < 10; j++) { //内层循环，每组十条
                if (total < mapData.length) { //不超过总记录数结束
                    var point = new BMap.Point(mapData[(i * 10) + j].lng, mapData[(i * 10) + j].lat);
                    pos.push(point);
                }
                total++;
            }
        var convertor = new BMap.Convertor();
        convertor.translate(pos, 1, 5, translateCallback)
    }}, 1000);

    function addMarker(mapData){  // 创建图标对象

        // 创建标注对象并添加到地图
        for(var i = 0,pointsLen = mapData.length;i <pointsLen;i++){
            var point = new BMap.Point(mapData[i].lng,mapData[i].lat);
            var  marker = new BMap.Marker(point);
            var label = new BMap.Label(mapData[i].pileCount, {
                offset : new BMap.Size(5, 4)
            });
            label.setStyle({
                background:'none',color:'#fff',border:'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
            });
            marker.setLabel(label);//显示地理名称 a
            bm.addOverlay(marker);
            //给标注点添加点击事件。使用立即执行函数和闭包
            addClickHandler(mapData[i],marker);

        }

    }
    function addClickHandler(data,marker){
        marker.addEventListener("click",function(e){
            openInfo(data,e)}
        );

    }
    function openInfo(data,e){
        var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : data.plotName , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
        };
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow("充电桩数量："+data.pileCount+"台",opts);  // 创建信息窗口对象
        bm.openInfoWindow(infoWindow,point); //开启信息窗口
    }

</script>
